<template>
  <div v-loading="loading" class="container">
    <div class="block" style="text-align:right">
      <el-button size="mini"><router-link :to="{ path: '/news/addNew', query: {placeId: placeId}}">增加资讯</router-link></el-button>
      <el-button size="mini"><router-link :to="{ path: '/home/dashboard', query: {back: 1}}">返回</router-link></el-button>
    </div>
    <el-table
      :data="list"
      height="650px"
      stripe
      style="width: 100%">
      <el-table-column
        label="标题"
        width="300px"
        header-align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        width="300px"
        header-align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        label="发布时间"
        header-align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.publish_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="版本"
        width="300px"
        header-align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" header-align="left">
        <template slot-scope="scope">
          <div style="display: inline-block">
            <el-button
              size="mini"
              @click="handleUpdateNews(scope.row.id)"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import { mapGetters } from 'vuex'
import { listNews, deleteNews } from '@/api/new'
const map = { type: { 0: '解放日报', 1: '其他来源' }}
export default {
  name: 'Dashboard',
  data() {
    this.map = map
    return {
      placeId: this.$route.query.placeId,
      loading: false,
      list: [],
      pageSize: 100,
      pageNo: 1,
      total: 1462,
      word: '',
      fileList: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  created() {
    this.initData()
  },
  filters: {
    formatTime(time) {
      if (time == null || time === '') {
        return 'N/A'
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  methods: {
    initData() {
      this.loading = true
      listNews(this.placeId).then(response => {
        this.list = response.data.list
        this.pageSize = response.data.pageSize
        this.total = response.data.total
        this.loading = false
      }).catch(reason => {
        console.error(reason)
        this.loading = false
      })
    },
    handleUpdateNews(newId) {
      this.$router.push({ path: '/news/addNew', query: { newId: newId }})
    },
    handleDelete(index, row) {
      console.log('handleDeleteOrder=' + row.id)
      this.$confirm('是否要删除资讯', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNews(row.id).then((response) => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          })
          this.initData()
        })
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container {
    margin: 30px;
    &-text {
      font-size: 25px;
      line-height: 40px;
    }
    &-instruction {
      font-size: 15px;
      font-style: italic;
      line-height: 25px;
      color: #99a9bf;
    }
  }
  .container .preview-area .photo-remove {
    display: none;
    position: absolute;
    width: 96%;
    height: 88%;
    background: #000000;
    opacity: 0.5;
   .remove-btn {
      display: block;
      position: absolute;
      width: 50px;
      height: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
  }
  .container .preview-area:hover .photo-remove{
    display: block;
  }
</style>
